<%@ page import="com.ym.utils.StringHandler" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    long uid = StringHandler.getLong(request.getParameter("uid"));
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户交易流水</title>
    <%@ include file="/WEB-INF/view/common/includ-css.jsp" %>
    <style>
        .layui-table1 {
            margin: 10px 0;
            width: 100%;
            margin: 10px 0;
            border-collapse: collapse;
        }
        .layui-table1 th {
            font-weight: 400;
            position: relative;
            padding: 9px 15px;
            min-height: 20px;
            line-height: 20px;
            font-size: 14px;
        }
    </style>
</head>
<body class="gray-bg">
<div class="row wrapper border-bottom white-bg">
    <div class="col-sm-12">
        <div class="ibox float-e-margins" style="margin-bottom: 0px;">
            <div class="ibox-title">
                <h5>查询条件</h5>
                <div class="ibox-tools">
                    <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                    </a>
                </div>
            </div>
            <div class="ibox-content">
                <form class="form-inline">
                    <div class="form-group">
                        <label class="font-normal">用户id：</label>
                        <input type="text" id="uid" name="uid" placeholder="用户id" value="<%=uid%>"/>
                    </div>
                    <button type="button" class="btn btn-white btn-info btn-round" style="margin-bottom: 0px;" id="query">
                        <i class="ace-icon fa fa-search bigger-120 blue"></i>查询
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-sm-4">
        <h2>用户交易流水</h2>
    </div>
</div>

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">

                <div class="ibox-content">
                    <table id="dataTables" class="table table-striped table-bordered table-hover">
                        <thead>
                        <tr>
                        <tr>
                            <th>创建时间</th>
                            <th>创建人id</th>
                            <th>昵称</th>
                            <th>头像</th>
                            <th>领取人id</th>
                            <th>昵称</th>
                            <th>头像</th>
                            <th>金额</th>
                            <th>类型</th>
                            <th>状态</th>
                            <th>领取信息</th>
                            <th>操作</th>
                        </tr>
                        </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-sm-4">
        <button type="button" class="btn btn-white btn-info btn-round" style="margin-bottom: 0px;" onclick="history.back();">
            返回
        </button>
    </div>
</div>
<%@ include file="/WEB-INF/view/common/includ-js.jsp" %>
<!-- Data Tables -->
<script src="${path}/static/Hui/js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="${path}/static/Hui/js/plugins/dataTables/dataTables.bootstrap.js"></script>
<script src="${path}/static/plugins/layui/layui.all.js"></script>
<script>
    $(function(){

        // 关闭错误提示
        $.fn.dataTable.ext.errMode = 'none';

        // 数据表格
        var tables = $("#dataTables").dataTable({
            paging:true,
            serverSide: true,
            searching: false,
            ordering:  false,
            processing: false,
            "lengthMenu": [10, 20, 50, 100],
            pageLength: 20,
            lengthChange: true,
            "ajax":{
                url:"/app/user/red/list",
                type:"post",
                data: function (d) {
                    d.uid=$("#uid").val()
                }
            },
            columns: [
                { "data": "raw_add_time" },
                { "data": "user_id" },
                { "data": "outNickName" },
                { "data": "outAvatarUrl" },
                { "data": "list_user_id" },
                { "data": "nickName" },
                { "data": "avatarUrl" },
                { "data": "amount" },
                { "data": "typeStr" },
                { "data": "statusStr" },
                { "data": "id" },
                { "data": "id" },
            ],
            columnDefs: [
                {
                    "render": function(data, type, row, meta) {
                        var html ='暂无图片';
                        if(data!=null && data!=''){
                            html = '<img src="'+data+'" style="height: 40px;"/>';
                        }
                        return html;
                    },
                    "targets": 3
                },{
                    "render": function(data, type, row, meta) {
                        var html ='暂无图片';
                        if(data!=null && data!=''){
                            html = '<img src="'+data+'" style="height: 40px;"/>';
                        }
                        return html;
                    },
                    "targets": 6
                },{
                    "render": function(data, type, row, meta) {
                        var html = '<div class="action-buttons">';
                            html += '<a href="javascript:void(0)" onclick="redRecordList(' + data + ')" class="blue" title="详情"><i style="font: normal normal normal 14px/1 FontAwesome;">详情</i></a>';
                            html += '</div>';
                        return html;
                    },
                    "targets": 10
                },{
                    "render": function(data, type, row, meta) {
                        var html = '<div class="action-buttons">';
                        if(row.status==1 && row.type!=3){
                            html += '<a href="javascript:void(0)" onclick="redUpdate(' + data + ','+row.user_id+')" class="blue" title="退款"><i style="font: normal normal normal 14px/1 FontAwesome;">退款|</i></a>';
                        }
                        if(row.status==1){
                            html += '<a href="javascript:void(0)" onclick="redAddRedis(' + data + ')" class="blue" title="添加缓存"><i style="font: normal normal normal 14px/1 FontAwesome;">添加缓存|</i></a>';
                        }
                        html += '</div>';
                        return html;
                    },
                    "targets": 11
                },
            ]
        });
        $("#query").click(function(){
            tables.dataTable().fnDraw();
        });

    });
    function redUpdate(redId,uid){
        layer.confirm("当前记录是否退款", function (e) {
            var index = layer.load(2);
            $.ajax({
                type:"post",
                url:"${path}/app/user/red/update",
                dataType:"json",
                data:{redId:redId,uid:uid},
                success:function(data){
                    layer.close(index);
                    if(data.code ==0){
                        layer.alert(data.msg,{icon:1}, function(){
                            location.reload();
                        });
                    }else{
                        layer.alert(data.msg,{icon:2});
                    }
                },
                error:function (data) {
                    layer.close(index);
                }
            });
        });
    }

    function redAddRedis(redId){
        layer.confirm("当前记录是否重新添加缓存", function (e) {
            var index = layer.load(2);
            $.ajax({
                type:"post",
                url:"${path}/app/user/red/add/redis",
                dataType:"json",
                data:{redId:redId},
                success:function(data){
                    layer.close(index);
                    if(data.code ==0){
                        layer.alert(data.msg,{icon:1}, function(){
                            location.reload();
                        });
                    }else{
                        layer.alert(data.msg,{icon:2});
                    }
                },
                error:function (data) {
                    layer.close(index);
                }
            });
        });
    }
    function redRecordList(redId){
            $.ajax({
                type:"post",
                url:"${path}/app/user/red/record/list",
                dataType:"json",
                data:{redId:redId},
                success:function(data){
                    if(data.code == 0) {
                        var html = '<div style="padding: 20px">';
                        html += '<table class="layui-table1">';
                        html += '<tbody>';
                        html += '<tr>'
                        html += '</tr>';
                        html += '<th>id</th>';
                        html += '<th>昵称</th>';
                        html += '<th>头像</th>';
                        html += '<th>金额</th>';
                        html += '</th>';
                        var list = data.list;
                        for (var i = 0; i < list.length; i++){
                            html += '</tr>';
                            html += '<th>'+list[i].user_id+'</th>';
                            html += '<th>'+list[i].nickName+'</th>';
                            html += '<th><img src="'+list[i].avatarUrl+'" style="width: 40px;"></th>';
                            html += '<th>'+list[i].money+'</th>';
                            html += '</tr>';
                        }
                        html += '</tbody>';
                        html += '</table>';
                        html += '</div>';
                        layer.open({
                            type: 1,
                            shade: 0.8,
                            offset: 'auto',
                            shadeClose: true//点击外围关闭弹窗
                            ,content:html
                            ,btn: '关闭'
                            ,btnAlign: 'c' //按钮居中
                            ,title: "用户配置信息" //不显示标题
                            ,area: ['40%', '45%']
                            ,yes: function(){
                                layer.closeAll();
                            }
                        });
                    }else{
                        layer.alert(data.msg, {icon: 2});
                    }
                }
            });
    }
</script>
</body>
</html>
